<template>
    <div class="ps-row" :class="[
      justify !== 'start' ? 'is-justify-' + justify : '',
      align !== 'top' ? 'is-align-' + align : ''
    ]">
        <slot></slot>
    </div>
</template>
<style lang="less" scoped>
   .ps-row{
       display: flex;
       justify-content: flex-start;
       align-items: flex-start;
   }
   .is-justify-end{
       justify-content: flex-end;
   }
    .is-justify-center{
        justify-content: center;
    }
    .is-justify-between{
        justify-content: space-between;
    }
    .is-justify-between{
        justify-content: space-around;
    }
    .is-align-end{
        align-items: flex-end;
    }
    .is-align-center{
        align-items: center;
    }
    .is-align-stretch{
        align-items: stretch;
    }
    .is-align-baseline{
        align-items: baseline;
    }
</style>
<script>
    export default{
        props:{
            justify:{
                type:String,
                default:'start'
            },
            align:{
                type:String,
                default:'top'
            }
        },
        data(){
            return{

            }
        },
        components:{

        }
    }
</script>
